<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="pragram" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="expires" content="0">
    <link rel="icon" href="./base/favicon.ico">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>快速预览</title>
    <style>
      html {
        height: 100%;
        font-family: PingFangSC-Medium, PingFang SC;
      }
      body {
        height: 100%;
        margin: 0;
      }
      #app {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        overflow: hidden;
        background-image: url('./base/login-background.png');
        background-repeat: no-repeat;
        background-size: cover;
      }
      .switch-content {
        height: 666px;
        width: 1450px;
        position: relative;
        display: flex;
        flex-wrap: nowrap;
      }
      .ibiz-logo {
        position: absolute;
        top: 48px;
        left: 56px;
      }
      .switch-background {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 850px;
        background-image: url('./base/switch-content-bg.png');
        background-repeat: no-repeat;
        background-size: cover;
      }
      .switch-background img {
        margin-right: 20px;
      }
      .switch-background span {
        position: absolute;
        left: 300px;
        bottom: 107px;
        font-size: 32px;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 45px;
      }
      .main-switch {
        position: relative;
        width: 600px;
        padding: 0 50px;
        background: #072D4E;
        border: 1px solid #979797;
        box-sizing: border-box;
      }
      .main-switch .title {
        position: absolute;
        top: 36px;
        font-size: 39px;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 54px;
      }
      .main-switch .list {
        width: 100%;
        height: 393px;
        margin-top: 128px;
      }
      .main-switch .list input {
        height: 60px;
        width: 100%;
        border: 0;
        background: #FFFFFF;
        border-radius: 4px;
        padding-left: 20px;
        box-sizing: border-box;
        font-size: 27px;
        font-weight: 400;
        color: #62A2F6;
        line-height: 38px;
      }
      .main-switch .list .items {
        height: 333px;
        background-color: #8598A8;
        overflow: auto;
      }
      .main-switch .list .items .empty {
        font-size: 24px;
        color: #FFFFFF;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .main-switch .list .items ul {
        margin: 0;
        list-style-type: none;
        padding-left: 20px;
        font-size: 24px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 62px;
        cursor: pointer;
      }
      .main-switch .list .items ul .active {
        color: #62A2F6;
      }
      .main-switch .button {
        position: absolute;
        bottom: 48px;
        height: 50px;
        width: calc(100% - 100px);
        border: 0;
        background: #62A2F6;
        font-size: 24px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 33px;
        cursor: pointer;
      }
      .main-switch .list .items::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        background: #8598A8;
      }
      .main-switch .list .items::-webkit-scrollbar-track {
        border-radius: 0;
        box-shadow: none;
        border: 0;
      }
      .main-switch .list .items::-webkit-scrollbar-thumb {
        border-radius: 0;
        box-shadow: none;
        border: 0;
        background-color: #A9B6C1;
      }
.app-loading-x {
    background: radial-gradient(#55A0FE, #1767CB);
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
}

.app-loading-x-container {
    position: absolute;
    top: 50%;
    width: 100%;
    color: #fff;
    text-align: center;
    transform: translateY(-50%);
}

.app-loading-x-container label {
    display: inline-block;
    font-size: 20px;
    opacity: 0;
}

.app-loading-x-container label:nth-child(6) {
    animation: loading 3s infinite ease-in-out
}

.app-loading-x-container label:nth-child(5) {
    animation: loading 3s .1s infinite ease-in-out
}
.app-loading-x-container label:nth-child(4) {
    animation: loading 3s .2s infinite ease-in-out
}
.app-loading-x-container label:nth-child(3) {
    animation: loading 3s .3s infinite ease-in-out
}
.app-loading-x-container label:nth-child(2) {
    animation: loading 3s .4s infinite ease-in-out
}
.app-loading-x-container label:nth-child(1) {
    animation: loading 3s .5s infinite ease-in-out
}
@keyframes loading{
    0% {
        transform:translateX(-300px);
        opacity:0
    }
    33% {
        transform:translateX(0);
        opacity:1
    }
    66% {
        transform:translateX(0);
        opacity:1
    }
    100% {
        transform:translateX(300px);opacity:0
    }
}
    </style>
  </head>
  <body>
    <div id="app">
      <div class="switch-content">
        <div class="ibiz-logo">
          <img src="./base/ibiz-logo.svg" >
          </img>
        </div>
        <div class="switch-background">
          <img src="./base/switch-background.svg" width="630" height="270">
          </img>
          <span>高效工作 · 快速确认</span>
        </div>
        <div class="main-switch">
          <div class="title">应用切换</div>
          <div class="list">
            <input type="text" :value="selectItem.codeName">
            <div class="items">
              <ul v-if="items.length > 0">
                <li v-for='(item,index) in items' :class="{'active': item.codeName == selectItem.codeName}" @click="onClick(item)" :key="index">{{item.codeName}}</li>
              </ul>
              <div v-else class="empty">暂无应用</div>
            </div>
          </div>
          <button class="button" @click="onConfirm">确认</button>
        </div>
      </div>
      <div v-show="isLoading" class="app-loading-x">
        <div class="app-loading-x-container">
          <label> ●</label>
          <label> ●</label>
          <label> ●</label>
          <label> ●</label>
          <label> ●</label>
          <label> ●</label>
        </div>
      </div>
    </div>
    <script src="./index.js"></script>
  </body>
</html>
